<template>
    <div class="blog-details-container">
        <!---文章标题作者信息发布时间摘要部分开始-->
        <div class="blog-details-container-header">
            <h2>这里是博客标题</h2>

            <div style="display: flex;justify-content:space-around;color:#ccc">
                <div class="blog-details-container-header-subtitle"><i class="el-icon-user"></i>&nbsp;用户名</div>
                <div class="blog-details-container-header-subtitle"><i class="el-icon-date"></i>&nbsp;2021-10-10
                    14:23:56
                </div>
                <div class="blog-details-container-header-subtitle"><i class="el-icon-s-grid"></i>后端</div>
                <div class="blog-details-container-header-subtitle"><i class="el-icon-view"></i>1000</div>
                <div class="blog-details-container-header-subtitle"><i class="el-icon-chat-line-round"></i>100</div>
                <div class="blog-details-container-header-subtitle"><i class="el-icon-edit"></i><a href="#">编辑</a></div>
            </div>
            <hr style="margin-top:4px;">
            <div class="blog-details-container-summary">
                这里是文章摘要
            </div>
        </div>
        <!---文章标题作者信息发布时间摘要部分结束-->
        <!----文章详情markdown html显示部分开始------>
        <div class="markdown-body">
            这里是文章正文这里是文章正文这里是文章正文这里是文章正文这里是文章正文
        </div>
        <!----文章详情markdown html显示部分结束------>
        <div>
            <el-divider content-position="left">分享</el-divider>
        </div>

        <!--vshare分享插件-->
        <share :config="config"></share>
        <br>

    </div>
</template>

<script>
    //引入分享组件
    import Share from 'vue-social-share'
    Vue.use(Share);
    export default {
        name: "MyBlogDetailsContent",
        data() {
            return {
                //分享组件的配置对象
                config: {
                    url: 'https://www.simoniu.com/pBlogDetails?aid=' + this.$route.query.aid,
                    disabled: ['google', 'facebook', 'twitter'] // 禁用的站点
                }
            }
        }
    }
</script>

<style scoped>
    .blog-details-container {
        width: 98%;
        background-color: #FFF;
        border: 1px solid #ddd;
        border-radius: 5px;

    }

    .blog-details-container-header h2 {
        text-align: center;
        color: #336699;
    }

    .blog-details-container-summary {
        background-color: #EEE;
        border: 0px solid #ccc;
        border-radius: 10px;
        padding: 20px 20px;
        margin: 10px;
        display: block;
        color: #666
    }
    .blog-details-container-header-subtitle{
        font-size: small;
    }
</style>